<template>
	<view>
		<view class="classify">
			<view class="z-flex-c z-padding-lr-32 z-padding-b-24 z-font-w z-font-32" :style="'padding-top:' + safeTop" style="box-sizing: content-box;">分类</view>

			<view class="classify_box">
				<!-- 左盒子 -->
				<scroll-view class="classify_left" scroll-y :show-scrollbar="false" enhanced="true">
					<view class="z-font-30  label hidden" :class="{'active text_333' : active == index , 'text_999' :active != index}" @click="change(index)" v-for="(item,index) in cate">
						{{ item.label }}
					</view>
				</scroll-view>

				<!-- 右盒子 -->
				<view class="classify_right z-margin-l-24 z-radius-t-16">
					<view class="classify_right_title z-padding-30 z-font-w">
						{{ cate[active].label }}
					</view>
					<view class="classify_right_con">
						<scroll-view scroll-y :show-scrollbar="false" enhanced="true" class="classify_right_scroll" bindscrolltolower="lowerthreshold">
							<view class="classify_right_box">
								<view
									class="classify_right_item z-margin-l-24 z-margin-b-24"
									v-for="(item,index) in cate[active].children"								
									@click="cateTap(item)"
								>
									<image :src="cdn(item.image)" class="classify_right_box_img z-radius-16" mode="aspectFill" />
									<view class="z-margin-t-16 z-font-22">{{ item.label }}</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import http from '../../utils/http';
export default {
	data() {
		return {
			height: '',
			safehigh: '',
			activeKey: 0,
			active: 0,
			cate: [],
			// #ifdef MP-WEIXIN
				safeTop:uni.getStorageSync('safeTop')
			// #endif
		};
	},
	onLoad() {
	    this.getInfo()
	},
	methods: {
		cateTap(e){
		    this.util.skip('/service/catelist/catelist?two_category_id='+e.id+'&name='+e.label)
		  },
		getInfo(){
		    http.post('category/getlist', {type: 'all'}, true).then(res => {
		      this.cate = res.data
		    })
		},
		change(index){
		    this.active = index
		},
	}
};
</script>

<style>
/* pages/classify/classify.wxss */
.classify {
	background-color: #edf1f4;
	width: 100vw;
	height: 100vh;
	/* #ifdef H5 */
	height: calc(100vh - 90rpx);
	/* #endif */
	display: flex;
	flex-direction: column;
}

.classify_box {
	display: flex;
	flex: 1;
	overflow: hidden;
	/* background-color: red; */
}

.classify_left {
	overflow: hidden;
	color: #999;
	height: 100%;
	width: 174rpx;
	background: #fff;
	box-sizing: border-box;
}

.label {
	height: 124rpx;
	line-height: 124rpx;
	position: relative;
	padding-left: 20rpx;
}
.active {
	background: #edf1f4;
}
.active::before {
	content: '';
	width: 10rpx;
	height: 36rpx;
	background: #62cb81;
	position: absolute;
	left: 0;
	top: 44rpx;
}

/* ::v-deep .van-sidebar-item{
  width: 174rpx;
} */

.van-sidebar-item {
	padding-top: 30rpx;
	background-color: #fff !important;
}

.customclass {
	padding-top: 30rpx;
}

.van-sidebar-item--selected {
	border-color: #62cb81 !important;
	background: #edf1f4 !important;
	color: #000 !important;
}

.classify_right {
	box-sizing: border-box;
	width: 558rpx;
	background-color: #fff;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.classify_right_con {
	flex: 1;
	overflow: hidden;
}

.classify_right_scroll {
	height: 100%;
	width: 100%;
}

.classify_right_box {
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
}

.classify_right_item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.classify_right_box_img {
	width: 154rpx;
	height: 154rpx;
}
</style>
